<template>
	
	<view class="e-skeleton-swiper" :style="[customStyle]">
		<SkeletonBlock>
			<view class="e-skeleton-swiper__item"  >
				<view class="e-skeleton-swiper__dot "  >
					<view class="e-skeleton-swiper__dot__item "  v-for="item in dotList" :key="item"></view>
				</view>
			</view>
		</SkeletonBlock>
	</view>
	
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	export default defineComponent({
		name: "skeleton-swiper"
	});
</script>

<script lang="ts" setup>
	import {computed} from 'vue'
	import SkeletonBlock from './block.vue'
	const props = withDefaults(defineProps<{
		config:{
				dot:number
			}
		customStyle?:Record<any,any>|string,
		animate?:boolean
	}>(),{
		config:() => ({
				dot:3
			})
	})
	
	const dotList = computed(() => {
		return [...new Array(props.config.dot).keys()]
	})
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/skeleton-swiper.scss";
</style>
